import { getServerAuthSession } from "@/auth";
import { prisma } from "@/lib/prisma";
import { recommendPosts } from "@/lib/recommend";
import PostCard from "@/components/PostCard";
import Logo from "@/components/Logo";
import Link from "next/link";
import BottomNav from "@/components/BottomNav";

export default async function Home() {
  const session = await getServerAuthSession();
  const user = (session as any)?.user ?? null;
  const items = await recommendPosts(prisma as any, user?.id ?? null, 20);

  return (
    <div className="min-h-dvh pb-20 bg-gradient-to-br from-pink-50 via-white to-orange-50 relative overflow-hidden">
      {/* 背景装饰元素 */}
      <div className="absolute inset-0 pointer-events-none">
        {/* 左上角装饰 */}
        <div className="absolute -top-20 -left-20 w-40 h-40 bg-gradient-to-br from-pink-200/30 to-transparent rounded-full blur-3xl" />
        {/* 右下角装饰 */}
        <div className="absolute -bottom-20 -right-20 w-60 h-60 bg-gradient-to-tl from-orange-200/30 to-transparent rounded-full blur-3xl" />
        {/* 中间装饰 */}
        <div className="absolute top-1/3 left-1/2 transform -translate-x-1/2 w-80 h-80 bg-gradient-to-r from-yellow-100/20 to-pink-100/20 rounded-full blur-3xl" />
      </div>

      {/* 顶部导航 */}
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-100/50 safe-area-pt shadow-sm">
        <div className="max-w-screen-md mx-auto px-4 h-16 flex items-center justify-between">
          <Link href="/" className="hover:scale-105 transition-transform duration-200">
            <Logo />
          </Link>
          <nav className="text-sm flex items-center gap-4">
            {user ? (
              <div className="flex items-center gap-3">
                <span className="text-gray-600 font-medium">Hi, {user.name || '用户'}</span>
                <a 
                  href="/api/auth/signout" 
                  className="px-4 py-2 rounded-full bg-white/80 text-gray-700 hover:bg-white hover:shadow-md transition-all duration-200 border border-gray-200/50 backdrop-blur-sm"
                >
                  退出
                </a>
              </div>
            ) : (
              <div className="flex items-center gap-3">
                <Link 
                  className="px-4 py-2 rounded-full bg-white/80 text-gray-700 hover:bg-white hover:shadow-md transition-all duration-200 border border-gray-200/50 backdrop-blur-sm" 
                  href="/sign-in"
                >
                  登录
                </Link>
                <Link 
                  className="px-4 py-2 rounded-full bg-gradient-to-r from-pink-500 via-red-500 to-orange-400 text-white hover:shadow-lg hover:scale-105 transition-all duration-200 font-medium" 
                  href="/sign-up"
                >
                  注册
                </Link>
              </div>
            )}
          </nav>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="max-w-screen-md mx-auto px-3 py-8 relative z-10">
        {/* 文艺标题区域 */}
        <div className="text-center mb-8">
          <h2 className="text-2xl font-light text-gray-800 mb-2">
            发现生活的
            <span className="bg-gradient-to-r from-pink-500 via-red-500 to-orange-400 bg-clip-text text-transparent font-medium">
              美好瞬间
            </span>
          </h2>
          <p className="text-sm text-gray-500 font-light">
            每一个分享都是生活的诗意表达
          </p>
          {/* 装饰线 */}
          <div className="flex items-center justify-center mt-4">
            <div className="h-px bg-gradient-to-r from-transparent via-pink-300 to-transparent w-32"></div>
            <div className="mx-4 w-2 h-2 bg-gradient-to-r from-pink-400 to-orange-400 rounded-full"></div>
            <div className="h-px bg-gradient-to-r from-transparent via-orange-300 to-transparent w-32"></div>
          </div>
        </div>

        {/* 瀑布流网格 */}
        <div className="grid grid-cols-2 gap-4 sm:gap-5 md:grid-cols-3">
          {items.map((p, index) => (
            <div
              key={p.id}
              className={`${index % 3 === 0 ? 'sm:mt-0' : index % 3 === 1 ? 'sm:mt-6' : 'sm:mt-12'} 
                         ${index % 2 === 0 ? 'mt-0' : 'mt-4'} 
                         transform hover:scale-[1.02] transition-transform duration-300`}
              style={{
                animationDelay: `${index * 100}ms`,
                animation: 'fadeInUp 0.6s ease-out forwards'
              }}
            >
              <PostCard post={p} />
            </div>
          ))}
        </div>
        
        {/* 加载更多提示 */}
        {items.length > 0 && (
          <div className="mt-16 text-center">
            <div className="inline-flex items-center gap-2 px-6 py-3 text-sm text-gray-500 bg-white/70 backdrop-blur-sm rounded-full border border-gray-200/50 shadow-sm">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor" className="text-pink-400"/>
              </svg>
              <span>已经到底了，期待更多精彩内容～</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor" className="text-orange-400"/>
              </svg>
            </div>
          </div>
        )}
      </main>

      {/* 底部导航 */}
      <BottomNav />
    </div>
  );
}